<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>面向对象的放大镜</title>
    <style>
        *{margin: 0;padding: 0;}
        .box {
            width: 450px;
            height: 600px;
            border: 1px solid #333;
            margin: 49px;
            position: relative;
        }
        .box > .show {
            width: 450px;
            height: 450px;
            border-bottom: 1px solid #333;
            position: relative;

            cursor: none;
        }
        .box > .show > .mask{
            width: 200px;
            height: 200px;
            background-color: rgba(120, 120, 120, .5);
            display: none;
            position: absolute;
            left: 10px;
            top: 10px;

            pointer-events: none;
            /* 我不当做事件目标 */
        }
        .box > .show > .mask.active{
            display: block;
        }   
        img {
            width: 100%;
            height: 100%;
            display: block;
        }
        .box > .enlarge {
            width: 500px;
            height: 500px;
            border: 1px solid red;
            position: absolute;
            left: 110%;
            top: 0;
            display: none;
            background: url('./images/big.png') no-repeat;
            background-size: 800px 800px;
            /* 玛德这个size得在下面 不然不生效 */
            background-position: 0 0;
        }
        .box > .enlarge.active {
            display: block;
        }
        .box > .list {
            height: 149px;
            padding: 20px;
            box-sizing: border-box;
        }
        .list > p {
            width: 54px;
            height: 54px;
            float: left;
            margin: 20px;
            border: 1px solid transparent;
            cursor: pointer;
        }
        .list > p.active{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="show">
            <img src="./images/show.jpg" alt="">
            <div class="mask"></div>
        </div>

        <div class="enlarge">
        </div>

        <div class="list">
            <p class="active">
                <img 
                src="./images/small.jpg"
                data-show="./images/show.jpg"
                data-big="./images/big.png"
                alt="">
            </p>
            <p>
                <img 
                src="./images/small2.jpg" 
                data-show="./images/show2.jpg"
                data-big="./images/big2.png"
                alt="">
            </p>
        </div>
    </div>

    <script src="../JS/enlarge.js"></script>
    <script>
        /**
         * 面向对象 放大镜
         * 
         * 准备构造函数
         * show 盒子 属性: 移入移出事件
         * mask 盒子 属性: 显示隐藏 / 移动
         * enlarge 盒子 属性: 显示隐藏 / 背景图片移动
         * list 盒子 属性: 切换图片
         * 一堆方法
        */
        // console.log(window.getComputedStyle(document.querySelector('.box').querySelector('.enlarge')).backgroundSize)
        // let e = new Enlarge('.box')
        new Enlarge('.box')
        // e.init()
        
        // console.log(e)
    </script>
</body>
</html>